No deberías usar JSON.stringify . ya que ya es objeto

Simplemente cámbielo al siguiente código

 const response = await axios.get('http://localhost:5000/api/products'); setItems(response.data);

El método axios.get() devuelve el object y no puede usar el método map() en un objeto como se ha definido en el prototype de una matriz. Puede encontrar más detalles de Array.prototype.map() aquí

En primer lugar, comprendamos qué devuelve el método axios.get() .

 { // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the HTTP headers that the server responded with // All header names are lower cased and can be accessed using the bracket notation. // Example: `response.headers['content-type']` headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {} }

Puede encontrar más detalles aquí . Eso significa que los datos reales que está buscando residen en response.data . Necesitas extraerlo.

 const { data } = response;

Ahora necesita analizar y procesar los data en el formato renderizable de React .

Funcionó por setItems (response.data)

 import React from 'react' import { useState } from 'react'; const axios = require('axios'); const Api = () => { const [items, setItems] = useState([]); const getItems = async () => { try { const response = await axios.get('http://localhost:5000/api/products'); console.log(response.data); setItems (response.data); console.log(response.data) } catch (error) { console.error(error); } } return ( <div> <button onClick={getItems}> Fetch Data</button> <br /> <br /> <br /> {items.map((item)=>( <div > <h1>{item.name}</h1> <h2>{item.price}</h2> </div> ))} </div> )

}

 export default Api